<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Onboarding slides with jquery</title>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="slides-container">
  <button class="btn btn__absolute btn__prev btn--muted">Back</button>
  <button class="btn btn__absolute btn__next btn--highlighted">Next</button>
  <section class="slide slide-1">
    <article class="slide__inner slide--left">
      <div class="container container--slide-1">
        <div class="container__logo"><i class="material-icons">trending_up</i></div>
        <div class="container__stripe container__stripe--long"></div>
        <div class="container__stripe container__stripe--short"></div>
      </div>
    </article>
    <article class="slide__inner slide--right">
      <h1>Challenges</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora alias!</p>
    </article>
  </section>
  <section class="slide slide-2">
    <article class="slide__inner slide--left">
      <div class="card card--profile">
        <div class="card__logo card--profile__logo"><i class="material-icons">person</i></div>
        <div class="card__info card--profile__info">
          <h5 class="card__info__name card--profile__info__name">Kevin Badge</h5>
          <div class="card__data card--profile__data">
            <div class="card__data__stats card--profile__data__stats"> <i class="material-icons">work</i><span>413</span></div>
            <div class="card__data__stats card--profile__data__stats"><i class="material-icons">home</i><span>221</span></div>
            <div class="card__data__stats card--profile__data__stats"><span>Admin</span></div>
          </div>
        </div>
      </div>
      <div class="card card--profile profile--pink">
        <div class="card__logo card--profile__logo"><i class="material-icons">person</i></div>
        <div class="card__info card--profile__info">
          <h5 class="card__info__name card--profile__info__name">Billy Bob</h5>
          <div class="card__data card--profile__data">
            <div class="card__data__stats card--profile__data__stats"> <i class="material-icons">work</i><span>13</span></div>
            <div class="card__data__stats card--profile__data__stats"><i class="material-icons">home</i><span>21</span></div>
            <div class="card__data__stats card--profile__data__stats"><span>Developer</span></div>
          </div>
        </div>
      </div>
      <div class="card card--profile profile--yellow">
        <div class="card__logo card--profile__logo"><i class="material-icons">person</i></div>
        <div class="card__info card--profile__info">
          <h5 class="card__info__name card--profile__info__name">Kate Mate</h5>
          <div class="card__data card--profile__data">
            <div class="card__data__stats card--profile__data__stats"> <i class="material-icons">work</i><span>13</span></div>
            <div class="card__data__stats card--profile__data__stats"><i class="material-icons">home</i><span>21</span></div>
            <div class="card__data__stats card--profile__data__stats"><span>CTO</span></div>
          </div>
        </div>
      </div>
    </article>
    <article class="slide__inner slide--right">
      <h1>Peers</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, aut accusantium modi incidunt, odit voluptatem tempora!</p>
    </article>
  </section>
  <section class="slide slide-3">
    <article class="slide__inner slide--left">
      <div class="container container--slide-3">
        <header class="header--slide-3">
          <nav class="header__nav">
            <div class="header__nav__logo"> 
              <p>LOGO</p>
            </div>
            <div class="header__nav__cta">Lorem</div>
          </nav>
          <div class="header__hero">
            <div class="header__hero__table"></div>
            <div class="header__hero__chair"></div>
          </div>
        </header>
        <main class="main--slide-3">
          <section class="section--about">
            <h5>About</h5>
            <div class="section__stripe"></div>
            <div class="section__stripe"></div>
          </section>
          <section class="section--testimonials">
            <div class="section__logo"><i class="material-icons">person</i></div>
            <div class="section__info">
              <div class="section__stripe section__info__stripe"></div>
              <div class="section__stripe section__info__stripe"></div>
            </div>
          </section>
        </main>
      </div>
    </article>
    <article class="slide__inner slide--right">
      <h1>Landing page</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!</p>
    </article>
  </section>
  <section class="slide slide-4">
    <article class="slide__inner slide--left">
      <div class="card card--store">
        <div class="card__logo"><i class="material-icons">mic</i></div>
        <div class="card__info">
          <h5 class="card__info__name store__info">Microphones</h5>
          <div class="card__data"> 
            <p class="card__data__supplier">James</p>
            <p class="card__data__callout">Grab it soon...</p>
          </div>
        </div>
        <div class="card__price">
          <p class="card__price__price">€ 15.95</p>
          <button class="btn btn__storage btn--active">Buy</button>
          <p class="card__price__storage">12 left</p>
        </div>
      </div>
      <div class="card card--store">
        <div class="card__logo"><i class="material-icons">laptop</i></div>
        <div class="card__info">
          <h5 class="card__info__name store__info">Computers</h5>
          <div class="card__data"> 
            <p class="card__data__supplier">James</p>
            <p class="card__data__callout">Grab it soon...</p>
          </div>
        </div>
        <div class="card__price">
          <p class="card__price__price">€ 315</p>
          <button class="btn btn__storage btn--active">Buy</button>
          <p class="card__price__storage">9 left</p>
        </div>
      </div>
      <div class="card card--store">
        <div class="card__logo"><i class="material-icons">phone_iphone</i></div>
        <div class="card__info">
          <h5 class="card__info__name store__info">Mobile phones</h5>
          <div class="card__data"> 
            <p class="card__data__supplier">James</p>
            <p class="card__data__callout">Grab it soon...</p>
          </div>
        </div>
        <div class="card__price">
          <p class="card__price__price">€ 215</p>
          <button class="btn btn__storage btn--active">Buy</button>
          <p class="card__price__storage">4 left</p>
        </div>
      </div>
    </article>
    <article class="slide__inner slide--right">
      <h1>Store</h1>
      <p> Lorem ipsum dolor sit amet, consectetur adipisig elit. Dicta, aut accusantium modi incidunt, voluptatem tempora alias similique!</p>
    </article>
  </section>
</div>
<section class="pagination"> </section>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script><script  src="./script.js"></script>

</body>
</html>
